/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 17:49:48
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-08-16 17:06:54
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import {
	DatePicker,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	Table,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty,
	Spin,
	List
} from "antd";
import { LeftOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import styled from "styled-components";
import _ from "lodash";
import { useNavigate, useParams, NavLink } from "react-router-dom";
import api from "@services/";
import { formatArr, formatOne } from "@/utils/format-show-type";
import { toLocaleString } from "@/utils/format";
import moment from "moment";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import { ThTable } from "@/components/ThTable";
import Footer from "@/components/Footer";

const { Panel } = Collapse;


const eventColumns = [
	{
		title: "Method",
		dataIndex: "event_name",
		key: "event_name",
		width: "50%",
		textWrap: "word-break",
	},
	{
		title: "Type",
		dataIndex: "event_type",
		key: "event_type",
		width: "50%",
		textWrap: "word-break",
	}
];


function Main({ className }) {
	const { q } = useParams();
	const navigator = useNavigate();
	const [loading, setLoading] = useState(false);
	const [hash, setHash] = useState(q);
	const [detail, setDetail] = useState();

	const [totalEvents, setTotalEvents] = useState(0);
	const [tab, setTab] = useState('Events');

	useEffect(() => {
		common.showAPIUrl();
	}, []);

	if (!q) {
		return message.error("hash is not found");
	} else {
		if (q != hash) {
			setHash(q);
		}
	}
	if (document.getElementById("searchInput")) {
		document.getElementById("searchInput").value = hash;
	}
	console.log("hash", hash);
	//block.detail
	useEffect(async () => {
		setLoading(true);
		let result = await api.extrinsics.detail(hash);
		setLoading(false);
		if (result.msg != "ok") {
			return message.info(result.err || result.msg);
		}
		let o = formatOne({
			title: "Hash",
			dataIndex: "hash",
			key: "hash",
			showType: "copyLong"
		});
		let o2 = formatOne({
			title: "Hash",
			dataIndex: "hash",
			key: "hash",
			showType: "copyLong-link",
			link: '/account/{signer}'
		});
		let o3 = formatOne({
			title: "Hash",
			dataIndex: "hash",
			key: "hash",
			showType: "copyLong-link",
			link: '/account/{from}'
		});
		let o4 = formatOne({
			title: "Hash",
			dataIndex: "hash",
			key: "hash",
			showType: "copyLong-link",
			link: '/account/{to}'
		});
		let detail = result.data;
		detail.amount = detail.amount / 1e18;
		detail.fee_paid = detail.fee_paid / 1e18;

		detail.extrinsic_hash = o.render(detail.extrinsic_hash, detail);
		detail.signer = o2.render(detail.signer, detail);

		if (detail.from) {
			detail.from = o3.render(detail.from, detail);
		}
		if (detail.to) {
			detail.to = o4.render(detail.to, detail);
		}

		setDetail(detail);
	}, [hash]);
	//set event props
	const eventsProps = {
		border: true,
		size: "middle",
		pagesize: 10,
		loadList: {
			params: {
				extrinsicHash: hash,
				pagesize: 1000
			},
			method: api.event.listByExtrinsicHash,
			cb: {
				total: setTotalEvents
			}
		},
		table: {
			columns: eventColumns
		}
	};
	if (!detail) return '';



	return (
		<div className={className}>
			<div className="containner-in">
				<SearchBar background={"#f4f4f4"} height="100px" />
				<div className="content">
					<div className="top-title pointer" onClick={() => navigator(-1)}>
						<span>
							<img src="/img/left.svg" width={7} />
							&nbsp;&nbsp;
						</span>
						<label>Extrinsics Details</label>
					</div>
					<Spin spinning={loading}>
						<Card title={<div><img src="/img/overview.png" width={12} /> Overview</div>}>
							<div className="table-content">
								<div className="block-list-box2">
									<NavLink className="one-box link" to={'/block/' + detail.block_id}>
										<label className="label">Block</label>
										<span className="link span">#{toLocaleString(detail.block_id)}</span>
									</NavLink>
									<div className="one-box">
										<label className="label">Amount</label>
										<span className="banlance span">{detail.amount || '0'}</span>
									</div>
									<div className="one-box">
										<label className="label">Gas Fee</label>
										<span className="banlance span">{detail.fee_paid || '0'}</span>
									</div>
									<div className="one-box">
										<label className="label">Time ({common.getTimeZone()})</label>
										<span className="span">{moment(detail.timestamp).format('YYYY/MM/DD HH:mm:ss')}</span>
									</div>
									<div className="one-box">
										<label className="label">Status</label>
										<span className="span">{detail.result ? 'Success' : 'Fail'}</span>
									</div>
									<div className="one-box one-box2 box-hide"></div>
									{
										detail && detail.from ? (<div className="one-box one-box2">
											<label className="label">From</label>
											<span className="span">{detail.from}</span>
										</div>) : ('')
									}
									{
										detail && detail.to ? (<div className="one-box one-box2">
											<label className="label">To</label>
											<span className="span">{detail.to}</span>
										</div>) : ('')
									}
									<div className="one-box one-box2">
										<label className="label">Hash</label>
										<span className="span">{detail.extrinsic_hash}</span>
									</div>
									<div className="one-box one-box2">
										<label className="label">Signature</label>
										<span className="span">{detail.signer||"none"}</span>
									</div>
								</div>
							</div>
						</Card>
					</Spin>
					<Spin spinning={loading}>
						<div>
							<div className="o-title">
								<span className={tab == 'Events' ? 'curr' : 'uncurr'} onClick={() => setTab('Events')}>Events ({totalEvents})</span>
							</div>
							<div className="pc-list">
								<div className={tab == 'Events' ? 'list' : 'none'}>
									<ThTable props={eventsProps} />
								</div>
							</div>
							<div className="mobile-list">
								<div className={tab == 'Events' ? 'list' : 'none'}>
									<MList props={eventsProps} />
								</div>
							</div>
						</div>
					</Spin>
				</div>
				<Footer />
			</div>
		</div>
	);
}

export default styled(Main)`
	display: block;
	overflow: hidden;
	/* padding: 20px; */
	margin: 0 auto;
	.none{
		display: none;
	}
	.b1 {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		.bt {
			border-top: 4px solid #f0f0f0;
		}
		.br {
			border-right: 4px solid #f0f0f0;
		}
		.bb {
			border-bottom: 4px solid #f0f0f0;
		}
		.bl {
			border-left: 4px solid #f0f0f0;
		}
		div {
			border-collapse: collapse;
			text-indent: 10px;
			line-height: 50px;
		}
		.b2-1 {
			width: 100%;
		}
		.b2-2 {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			.b3-1 {
				width: 25%;
			}
			.b3-2 {
				flex: 1;
				display: flex;
				flex-direction: column;
				.b4-1 {
					display: flex;
					flex-direction: row;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
					}
				}
				.b4-2 {
					display: flex;
					flex-direction: row;
					align-items: center;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
						display: flex;
						flex-direction: column;
						.b6-1 {
							display: flex;
							flex-direction: row;
							.b7-1 {
								width: 50%;
							}
							.b7-2 {
								flex: 1;
							}
						}
						.b6-2 {
							display: flex;
							flex-direction: row;
							.b7-1 {
								width: 50%;
							}
							.b7-2 {
								flex: 1;
							}
						}
					}
				}
				.b4-3 {
					display: flex;
					flex-direction: row;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
					}
				}
			}
		}
	}
	.top-title {
		display: block;
		font-size: 18px;
		line-height: 80px;
	}
	.table-content {
		background-color: #fff;
		.ant-descriptions-header {
			margin-bottom: 0 !important;
			padding: 10px;
		}
	}
	pre {
		background-color: #999;
		color: #fff;
		padding: 20px;
	}	
	.o-title {
		display: flex;
		width: 100%;
		margin-top: 40px;
		overflow: hidden;
		flex-direction: row;
		align-items: center;
		span{
			padding: 0 14px;
			height: 50px;
			line-height: 50px;			
			text-align: center;
			overflow: hidden;
			display: block;
			margin-right:10px;
			border-radius: 5px;
		}
		.curr{
			background-color: #000000;
			color: #ffffff;
			cursor: not-allowed;
		}
		.uncurr{
			background-color: #eeeeee;
			color: #aeaeae;
			cursor: pointer;
		}
	}
	@media screen and (min-width: 801px) {
		.pc-list {
			display: block;
		}
		.mobile-list {
			display: none;
		}
		.ant-card-body{
			padding: 1px 15px!important;
		}
		.block-list-box2 {
			position: relative;
			padding: 4px 10px;
			width: 100%;
			line-height: 27px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.one-box {
				width: 25%;
				display: flex;
				flex-direction: column;
				margin: 24px 0;
				label {
					font-size: 13px;
					color: #6b7486;
				}
				span {
					font-size: 18px;
					color: #282e39;
				}
			}
			.one-box2 {
				width: 50% !important;
			}
		}
	}
	@media screen and (max-width: 800px) {
		.pc-list {
			display: none;
		}
		.mobile-list {
			display: block;
		}
		.ant-card-body{
			padding:15px!important;
		}
		.block-list-box2 {
			position: relative;
			width: 100%;
			line-height: 27px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.one-box {
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 9px 0;
				line-height: 27px;
				justify-content: space-between;
				align-items: center;
				.label {
					font-size: 16px;
					color: #6b7486;
				}
				.span {
					font-size: 18px;
					line-height: 27px;
					color: #000;
					word-wrap: break-word; 
					overflow-wrap: break-word;					
					text-align: right;
					.banlance::before {
						margin-top:2px;
					}
				}
			}
			.one-box2{
				flex-direction: column!important;
				align-items:flex-start!important;
				.span {
					text-align: left!important;
					width:100%;
				}
			}
			.box-hide{
				display: none!important;
			}
		}
	}	
`;
